<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <div class="btn-hu">

              <el-button type="primary" @click="addFn">新增角色</el-button>
            </div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              class="table"
            >
              <el-table-column prop="title" label="角色名称" />
              <el-table-column prop="description" label="角色描述" />
              <el-table-column label="操作">
                <!-- 利用作用域插槽，实现自定义内容 -->
                <template v-slot="{ row }">
                  <el-button type="primary" @click="openPermission(row.id)">分配权限</el-button>
                  <el-button @click="editFn(row.id)">编辑</el-button>
                  <el-button
                    type="danger"
                    @click="delFn(row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>

            </el-table>
            <!-- 分页器 -->
            <el-row type="flex" justify="center">
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="pagesize"
                @current-change="currentchangeFn"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <!-- 弹窗组件 -->
      <el-dialog
        :title="formData.id ? '编辑角色' : '新增角色'"
        :visible="openDialog"
        width="70%"
        @close="closeFn"
      >
        <!-- .trim去除首尾空格 -->
        <el-form
          ref="form"
          :rules="rules"
          :model="formData"
          label-width="120px"
        >
          <el-form-item label="角色名称" prop="title">
            <el-input v-model.trim="formData.title" placeholder="3-5个字符" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input
              v-model.trim="formData.description"
              placeholder="1-300个字符"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="sureRole">确 定</el-button>
        </span>
      </el-dialog>
      <AssignPerm ref="AssignPerm" :show-dialog.sync="visibleDialog" />
    </div>
  </div>
</template>

<script>
import { getRoleList, addRole, delRole, getRoleDetail, editRole, getRoleTotal } from '@/api/roles'
import AssignPerm from './component/assign-permission.vue'

export default {
  components: { AssignPerm },
  data() {
    return {
      tableData: [],
      openDialog: false,
      visibleDialog: false,
      total: 0,
      // 声明变量，方便后期修改
      page: 0, // 当前页码
      pagesize: 2, // 当前页数量
      formData: {
        title: '',
        description: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 获取数据
    this.getRoleList()
  },
  methods: {
    // 分配权限
    openPermission(id) {
      this.visibleDialog = true
      this.$refs.AssignPerm.getRoleList(id)
    },

    // 渲染列表
    async getRoleList() {
      const result = await getRoleTotal()
      this.total = result.data
      const res = await getRoleList({
        _limit: this.pagesize,
        _start: this.page
      })
      // 将获取到的数据赋值给数组
      this.tableData = res.data
      // console.log('11111', res)
    },
    // 添加功能
    addFn() {
      this.openDialog = true
    },
    // 确定按钮
    async sureRole() {
      // 表单验证
      await this.$refs.form.validate()
      if (this.formData.id) {
        // 编辑
        await editRole(this.formData)
      } else {
        // 新增
        await addRole(this.formData)
      }

      // 更新数据
      this.getRoleList()
      // 关闭弹窗
      this.closeFn()
    },
    // 关闭弹窗
    closeFn() {
      // 清空数据
      this.formData = {
        title: '',
        description: ''
      }
      // 清空校验规则
      this.$refs.form.resetFields()
      // 关闭弹窗
      this.openDialog = false
    },
    // 删除功能
    delFn(id) {
      this.$confirm('是否确定删除?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delRole(id)
          // 更新列表
          this.getRoleList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑功能
    async editFn(id) {
      // console.log(id)
      // 打开弹窗
      this.openDialog = true
      // 数据回显
      const res = await getRoleDetail(id)
      this.formData = res.data
    },
    // 分配角色
    assignRole() {},
    // 分页器换页
    currentchangeFn(curPage) {
      // curPage:就是用户点击的页码的值
      this.page = (curPage - 1) * this.pagesize
      // 调用接口 获取最新页码的值
      this.getRoleList()
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  margin-top: 10px;
}

  .btn-hu{
  display: flex;
  align-items: center;
  justify-content: end;
}

</style>
